<template>
  <div id="data-list" class="data-list">
    <Table :width="width"
           :height="tableheight" border
           :columns="columns"
           :data="data">
      <slot name="action"></slot>
    </Table>
    <Page id='page' class="page" v-if="needPager"
          :total="Number(total)"
          :page-size="Number(pageSize)"
          show-total
          show-elevator
          @on-change="gotoPage"/>
  </div>
</template>
<script>
export default {
  name: 'DataList',
  props: {
    columns: Array,
    data: Array,
    showSummary: Boolean,
    width: {
      type: [String, Number],
      default: '自动'
    },
    total: {
      type: [String, Number],
      default: 0
    },
    pageSize: {
      type: [String, Number],
      default: 20
    },
    needPager: {
      type: Boolean,
      default: true
    },
    setHeight: Number
  },
  data () {
    return {
      tableheight: 0
    }
  },
  computed: {
    /*    tableheight () {
      return this.dataHeight - document.getElementById('page').clientHeight
    } */
  },
  methods: {
    gotoPage (page) {
      this.$emit('pageChange', page)
    }
  },
  mounted () {
    this.tableheight = this.setHeight || (document.getElementById('data-list').clientHeight - (this.needPager ? (document.getElementById('page').clientHeight + 13) : 0))
  }
}
</script>
<style scoped>
  .btn{
    margin-right: 8px;
  }
  .ivu-table-wrapper{
    flex: 1;
    width: 100%;
  }
  .page{
    margin-top: 5px;
  }
  .data-list{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
